<template>
  <div>
  <div class="layui-row" style="display: none">
    <h1 class="threed">WebSocket客户端</h1>
    <div class="layui-col-md8 layui-col-md-offset2" style="margin-top: 20px">
      <h1>客户端</h1>
      <div class="layui-card">
        <div class="layui-card-body">

          <div class="layui-form-item">
            <label class="layui-form-label">请输入昵称</label>
            <div class="layui-input-inline" style="width: 300px">
              <input id="parentsname" type="text" name="title" required lay-verify="required" placeholder="请输入昵称"
                     autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn" @click="connect">连接</button>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">请发送内容</label>
            <div class="layui-input-inline" style="width: 300px">
              <input id="writeMsg" type="text" name="title" required lay-verify="required" placeholder="请输入要发送的内容"
                     autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn" @click="sendMsg">发送</button>
          </div>

        </div>
      </div>

      <div class="layui-card" style="margin-top: 100px">
        <div class="layui-card-header">
          <h1>操作详情</h1>
        </div>


      </div>
    </div>



  </div>
    <div id="content" class="layui-card-body">
      <h3 align="center" style="color: #007DDB;margin-top: 20px;margin-bottom: 20px"></h3>
    </div>
    <rotary></rotary>
</div>

</template>
<script>

  import rotary from '@/components/front/active/rotary.vue'
  import Rotary from "./rotary";

  import jQuery from '../../../../static/js/jquery-vendor.js'
  export default {
    components: {Rotary},

    name: "index",
    data() {
      return {
        ws: null,
        parentsname: "",
        websocketServerInfo: null,
        pname:"",
      }
    },
    comments: {
      rotary
    },
    methods: {

      initServerInfo() {
        var _this = this;
        //ajax调用controller 获得webscoketServer的信息用于连接websocket
        $.ajax({
          url: "/api/configController/websocketServerInfo",
          type: "get",
          dataType: "json",
          success: function (dto) {
            _this.websocketServerInfo = dto.msg;
            _this.connect();
          }
        });
      },
      connect() {

        // this.parentsname = $("#parentsname").val();
           this.parentsname = this.pname;
        if (this.parentsname != null && this.parentsname.trim() != "") {
          $("#content").html('');
          if ('WebSocket' in window) {
            this.ws = new WebSocket(this.websocketServerInfo + this.parentsname);
          } else if ('MozWebSocket' in window) {
            this.ws = new MozWebSocket(this.websocketServerInfo + this.parentsname);
          } else {
            alert("该浏览器不支持websocket");
          }


          this.ws.onmessage = function (evt) {
            var content = $("#content").html();
            let data = evt.data.split(",");
            console.log(data)
            if (data[0] == "1") {
              $("#content").html(content + '<div style="text-align: right;margin-bottom: 8px">\n' +
                '                        <p><q style="color: mediumorchid">服务端:</q><span>' + data[1] + '</span></p>\n' +
                '                    </div>\n' +
                '                    <br/>');
            } else {
              $("#content").html("<script type='text/javascript'>" + data[1] + "<\/script>");
            }
          };

          this.ws.onclose = function (evt) {
            var content = $("#content").html();
            $("#content").html(content + '<div style="margin-bottom: 8px">\n' +
              '                        <p><q style="color: coral;display: none" >客户端:</q><span>连接中断</span></p>\n' +
              '                    </div>\n' +
              '                    <br/>');
          };

          this.ws.onopen = function (evt) {
            $("#content").html('<div style="margin-bottom: 8px;display: none">\n' +
              '                        <p><q style="color: #ffffff">客户端:</q><span>连接成功...</span></p>\n' +
              '                    </div>\n' +
              '                    <br/>');
          };
        } else {
          //alert("请输入您的昵称");
        }
      },

      sendMsg() {
        this.ws.send($("#writeMsg").val());
        var content = $("#content").html();
        $("#content").html(content + '<div>\n' +
          '                        <p><q style="color: coral;display: none">客户端:</q><span>' + $("#writeMsg").val() + '</span></p>\n' +
          '                    </div>\n' +
          '                    <br/>');
      },
      test() {
        alert("tttt");
      }
    },
    created() {
      this.pname = this.$route.params.pname;
      this.initServerInfo()//1.调用请求连接websocket服务器
      // const s0 = document.createElement('script');
      // s0.type = 'text/javascript';
      // s0.src = '../../../../static/js/jquery.min.js';
      // document.body.appendChild(s0);

      const s1 = document.createElement('script');
      s1.type = 'text/javascript';
      s1.src = '../../../../static/js/jquery.cookie.js';
      document.body.appendChild(s1);
      const s2 = document.createElement('script');
      s2.type = 'text/javascript';
      s2.src = '../../../../static/js/jqueryrotate.js';
      document.body.appendChild(s2);
      const s3 = document.createElement('script');
      s3.type = 'text/javascript';
      s3.src = '../../../../static/js/rotary.js';
      document.body.appendChild(s3);
      const c1 = document.createElement('link');
      c1.rel = 'stylesheet';
      c1.href = '../../../../static/css/rotary.css';
      document.body.appendChild(c1);

    }
  }
</script>

<style scoped>
  .threed {
    text-align: center;
    color: mediumorchid;
    -webkit-text-stroke: 1px black;
    letter-spacing: 0.04em;
    background-color: white;
  }
</style>
